<template>
  <div class="deleteMain">
    <div class="title">
      <p>删除</p>
      <i class="el-icon-close" @click="closeDeleteBox"></i>
    </div>
    <div class="main">
      <div v-show="!showDeleteInfo">
        <p class="determine">确定删除“{{name}}”这个角色吗”？</p>
        <p class="after">删除之后，角色相关数据也会被删除。</p>
      </div>
      <p class="deleteInfo" v-show="showDeleteInfo">{{deleteMsg}}</p>
    </div>
    <div class="btn">
      <div v-show="!showDeleteInfo">
        <div class="cancel" @click="closeDeleteBox">取消</div>
        <div class="deterMine" @click="deleteInfoRole">确定</div>
      </div>
      <div class="deterMineClose" v-show="showDeleteInfo" @click="closeDeleteBox">确定</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      deleteMsg: '',
      showDeleteInfo: false
    }
  },
  props: [
    'id',
    'name',
    'pageIndex'
  ],
  methods: {
    closeDeleteBox () {
      this.$store.state.showDelete = false
      this.$store.state.ifShowCover = false
    },
    // 删除角色
    async deleteInfoRole () {
      deleteRoleType(this.id).then(res => {
        if (res.data.code === 400) {
          this.showDeleteInfo = true
          this.deleteMsg = res.data.message
        } else if (res.data.code === 200) {
          this.closeDeleteBox()
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 500
          })
          this.$store.dispatch('roleLimitManage/updateTable', this.pageIndex)
        }
      })
    }

  },
  created () {
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/deleteBox.scss'
</style>
